<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<title>登录</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/animate.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/lib/font-awesome-4.0.3/css/font-awesome.min.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/lib/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/lib/respond.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/lib/koala-ui.plugin.js"></script>	
<script type="text/javascript" src="<%=request.getContextPath()%>/lib/validate.js"></script>
<style type="text/css">
html,body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #FCFCFC;
}

.navbar {
	background-color: #438EB9;
	border-radius: 0;
	border-width: 0;
}

.navbar-brand {
	color: #fff !important;
}

.navbar-brand img {
	position: relative;
	top: -4px;
	width: 45px;
	height: 30px;
}

.login-container {
	margin-top: 8%;
	margin-left: auto;
	margin-right: auto;
	width: 16%;
	min-width: 250px;
}

.login-container .title {
	margin-bottom: 25px;
	text-align: center;
}

.login-container .form-group {
	position: relative;
	margin-bottom: 25px;
}

.login-container .form-group i {
	position: absolute;
	left: 8px;
	top: 8px;
	font-size: 16px;
}

.login-container input {
	padding-left: 32px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.login-container .btn-primary,.login-container .btn-primary:focus,.login-container .btn-primary:visited
	{
	font-size: 16px;
	letter-spacing: 10px;
	background-color: #438EB9;
	border-color: #438EB9;
}

.login-container .btn-primary:hover,.login-container .btn-primary:active
	{
	opacity: .9;
	filter: ALPHA(opacity = 90);
}
.checkerbox {
	position: relative;
	display: inline-block;
	top: -1px;
	color: #32a3ce;
	margin-right: 10px;
	background-color: #fafafa;
	border: 1px solid #c8c8c8;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	border-radius: 0;
	text-align: center;
	vertical-align: middle;
	height: 1.2em;
	line-height: 1.2em;
	width: 1.3em;
}
.checkerbox.checked:before {
	display: inline-block;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	content: "\e013";
	background-color: #f5f8fc;
	border-color: #adb8c0;
}
</style>
</head>
<body>
	<div class="navbar navbar-default">
		<a class="navbar-brand" href="http://www.openkoala.org"
			target="_"> <img src="<%=request.getContextPath()%>/images/global.logo.png" /> OPENCI
		</a>
		<div class="navbar-text navbar-right">
			<a href="<%=request.getContextPath()%>/register.jsp"><i class="fa fa-hand-o-right" data-toggle="tooltip" data-placement="bottom" title="注册"></i></a>
		</div>
	</div>
	<div class="login-container">
		<h3 class="title">Welcome Back</h3>
		<form class="form-horizontal" action="<%=request.getContextPath()%>/j_spring_security_check" id="loginFormId" method="post">
			<div class="form-group">
				<input type="text" class="form-control" id="j_username"
					name="j_username" placeholder="用户名" /> <i
					class="glyphicon glyphicon-user"></i>
			</div>
			<div class="form-group">
				<input type="password" class="form-control" id="j_password"
					name="j_password" placeholder="密码" /> <i
					class="glyphicon glyphicon-lock"></i>
			</div>
			<div class="form-group" style="font-size: 14px;height: 1.2em;line-height: 1.2em; margin-left: 25px;">
		     	<div class="checkerbox" id="rememberBtn"></div>记住用户名和密码
		  </div>
			<div class="form-group">
				<button id="loginBtn" type="button"
					class="btn btn-primary btn-block">登录</button>
			</div>
		</form>
	</div>
	<script>
		$(function() {
			var userNameElement = $("#j_username");
			var passwordElement = $("#j_password");
			var rememberBtn = $('#rememberBtn').on('click', function(){
				var $this = $(this);
				$this.toggleClass('checked');
			});
			var cookieArr = document.cookie.split(';');
			for(var i=0, j=cookieArr.length; i<j; i++){
				var cookie = cookieArr[i].split('=');
				cookie[0] = cookie[0].replace(/(^\s*)|(\s*$)/g,"")
				if(cookie[0] == 'isRemember'){
					rememberBtn.click();
				}else if(cookie[0] == 'username'){
					userNameElement.val(cookie[1]);
				}else if(cookie[0] == 'password'){
					passwordElement.val(cookie[1]);
				}
			}
			$('[data-toggle="tooltip"]').tooltip();
			var form = $('#loginFormId');
			var searchArr = location.search.substr(1, location.search.length).split('&');
			var condition = {};
			for(var i=0, j=searchArr.length; i<j; i++){
				var tempArr = searchArr[i].split('=');
				condition[tempArr[0]] = tempArr[1];
			}
			if(condition.j_username && condition.j_password){
				userNameElement.val(condition.j_username);
				passwordElement.val(condition.j_password);
				form.submit();
			}
			var btnLogin = $('#loginBtn');
			$('body').keydown(function(e) {
				if (e.keyCode == 13) {
					dologin();
				}
			});
			btnLogin.on('click', function() {
				dologin();
			});
			var dologin = function() {
				var username = userNameElement.val();
				var password = passwordElement.val();
				if (!Validation.notNull($('body'), userNameElement, username,
						'用户名不能为空')) {
					return false;
				}
				if (!Validation.notNull($('body'), passwordElement, password,
						'密码不能为空')) {
					return false;
				}
				if(rememberBtn.hasClass('checked')){
					document.cookie = 'isRemember='+escape('true');
					document.cookie = 'username='+escape(username);
					document.cookie = 'password='+escape(password)
				}else{
					var exp = new Date();
    				exp.setTime(exp.getTime() - 1);
					document.cookie = 'isRemember='+escape('')+';expires='+exp.toGMTString();
					document.cookie = 'username='+escape('')+';expires='+exp.toGMTString();
					document.cookie = 'password='+escape('')+';expires='+exp.toGMTString();
				}
				btnLogin.attr('disabled', 'disabled').html('正在登录...');
				form.submit();
			}
		});
	</script>
	<c:if test="${param.login_error == '1' }">
		<script>
			$('#loginFormId').message({
				type : 'error',
				content : '用户名错误!'
			});
			$('#j_username').focus();
		</script>
	</c:if>

	<c:if test="${param.login_error == '2' }">
		<script>
			$('#loginFormId').message({
				type : 'error',
				content : '密码错误!'
			});
			$('#j_password').focus();
		</script>
	</c:if>

	<c:if test="${param.login_error == '4' }">
		<script>
			$('#loginFormId').message({
				type : 'error',
				content : '该用户已被禁用!'
			});
		</script>
	</c:if>

</body>
</html>
